<template>
  <div class="student-data-container">
    <el-row :gutter="20">
      <!-- 左侧：学生信息列表（四分之三） -->
      <el-col :span="18">
        <el-card class="content-card">
          <template #header>
            <div class="card-header">
              <span>学生信息</span>
              <span v-if="selectedClass" class="selected-class-name">
                {{ selectedClass.major }}{{ selectedClass.classNumber }}班
              </span>
            </div>
          </template>
          
          <!-- 查询和筛选区域 -->
          <div class="filter-section">
            <el-row :gutter="16">
              <el-col :span="8">
                <el-input
                  v-model="searchForm.studentId"
                  placeholder="请输入学生学号查询"
                  clearable
                  @clear="handleSearch"
                  @keyup.enter="handleSearch"
                >
                  <template #prefix>
                    <el-icon><Search /></el-icon>
                  </template>
                  <template #append>
                    <el-button @click="handleSearch">查询</el-button>
                  </template>
                </el-input>
              </el-col>

            </el-row>
          </div>
          
          <!-- 学生信息表格 -->
          <div class="student-table-section">
            <el-table
              v-loading="loading"
              :data="filteredStudentList"
              stripe
              style="width: 100%"
              :empty-text="selectedClass ? '该班级暂无学生信息' : '请先选择班级查看学生信息'"
            >
              <el-table-column prop="studentId" label="学号" width="140" align="left" />
              <el-table-column prop="name" label="姓名" width="120" align="left" />
              <el-table-column prop="class" label="班级" width="220" align="left" />
              <el-table-column prop="gender" label="性别" width="80" align="left">
                <template #default="{ row }">
                  <el-tag :type="row.gender === '男' ? 'primary' : 'danger'" size="small" class="gender-tag">
                    {{ row.gender }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="contact" label="联系方式" width="140" align="left" />
              <el-table-column label="操作" width="120" align="left" fixed="right">
                <template #default="{ row }">
                  <el-button
                    type="primary"
                    size="small"
                    link
                    @click="handleViewDetail(row)"
                  >
                    查看详情
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      
      <!-- 右侧：班级卡片信息展示（四分之一） -->
      <el-col :span="6">
        <el-card class="class-card-container">
          <template #header>
            <div class="card-header">
              <span>班级信息</span>
            </div>
          </template>
          
          <div class="class-cards-list">
            <div 
              v-for="(classItem, index) in classList" 
              :key="index"
              class="class-card"
              :class="{ 'is-selected': selectedClass?.id === classItem.id }"
              @click="handleClassClick(classItem)"
            >
              <div class="class-card-header">
                <span class="class-title">{{ classItem.major }}{{ classItem.classNumber }}班</span>
              </div>
              
              <div class="class-card-body">
                <div class="class-info-item">
                  <span class="info-label">学院：</span>
                  <span class="info-value">{{ classItem.college }}</span>
                </div>
                
                <div class="class-info-item">
                  <span class="info-label">班级人数：</span>
                  <span class="info-value">{{ classItem.studentCount }}人</span>
                </div>
                
                <div class="class-info-item">
                  <span class="info-label">辅导员：</span>
                  <span class="info-value">{{ classItem.counselor }}</span>
                </div>
              </div>
              
              <div class="class-card-footer">
                <el-button
                  type="primary"
                  size="small"
                  @click.stop="handleViewClassDetail(classItem)"
                >
                  查看详情
                </el-button>
              </div>
            </div>
            
            <el-empty 
              v-if="classList.length === 0" 
              description="暂无班级信息" 
              :image-size="80"
            />
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 学生详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="学生详细信息"
      width="800px"
      :close-on-click-modal="false"
    >
      <el-descriptions
        :column="2"
        border
        :label-style="{ width: '120px', fontWeight: '600' }"
      >
        <!-- 头像 -->
        <el-descriptions-item label="头像" :span="2">
          <el-avatar :size="100" :src="currentStudentDetail.avatar">
            {{ currentStudentDetail.name }}
          </el-avatar>
        </el-descriptions-item>
        
        <!-- 基本信息 -->
        <el-descriptions-item label="学号">
          {{ currentStudentDetail.studentId }}
        </el-descriptions-item>
        
        <el-descriptions-item label="姓名">
          {{ currentStudentDetail.name }}
        </el-descriptions-item>
        
        <el-descriptions-item label="班级">
          {{ currentStudentDetail.class }}
        </el-descriptions-item>
        
        <el-descriptions-item label="学院">
          {{ currentStudentDetail.grade }}
        </el-descriptions-item>
        
        <el-descriptions-item label="性别">
          <el-tag :type="getGenderDisplay(currentStudentDetail.gender) === '男' ? 'primary' : 'danger'" size="small">
            {{ getGenderDisplay(currentStudentDetail.gender) }}
          </el-tag>
        </el-descriptions-item>
        
        <el-descriptions-item label="GPA">
          {{ currentStudentDetail.gpa !== undefined && currentStudentDetail.gpa !== null ? currentStudentDetail.gpa.toFixed(2) : '暂无' }}
        </el-descriptions-item>
        
        <el-descriptions-item label="身份证">
          {{ currentStudentDetail.idCard }}
        </el-descriptions-item>
        
        <el-descriptions-item label="联系电话">
          {{ currentStudentDetail.contact }}
        </el-descriptions-item>
        
        <!-- 家庭住址跨两列 -->
        <el-descriptions-item label="家庭住址" :span="2">
          {{ currentStudentDetail.address }}
        </el-descriptions-item>
        
        <!-- 紧急联系人信息 -->
        <el-descriptions-item label="紧急联系人">
          {{ currentStudentDetail.emergencyContact }}
        </el-descriptions-item>
        
        <el-descriptions-item label="紧急联系人电话">
          {{ currentStudentDetail.emergencyContactPhone }}
        </el-descriptions-item>
        
        <!-- 爱好跨两列 -->
        <el-descriptions-item label="爱好" :span="2">
          <el-tag
            v-for="(hobby, index) in currentStudentDetail.hobbies"
            :key="index"
            style="margin-right: 8px; margin-bottom: 4px;"
          >
            {{ hobby }}
          </el-tag>
        </el-descriptions-item>
      </el-descriptions>
      
      <template #footer>
        <el-button type="primary" @click="detailDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
    
    <!-- 班级详情对话框 -->
    <el-dialog
      v-model="classDetailDialogVisible"
      title="班级详细信息"
      width="800px"
      :close-on-click-modal="false"
    >
      <el-descriptions
        :column="2"
        border
        :label-style="{ width: '140px', fontWeight: '600' }"
      >
        <!-- 基本信息 -->
        <el-descriptions-item label="班级名称">
          {{ currentClassDetail.major }}{{ currentClassDetail.classNumber }}班
        </el-descriptions-item>
        
        <el-descriptions-item label="学院">
          {{ currentClassDetail.college }}
        </el-descriptions-item>
        
        <el-descriptions-item label="班级人数">
          {{ currentClassDetail.studentCount }}人
        </el-descriptions-item>
        
        <el-descriptions-item label="辅导员">
          {{ currentClassDetail.counselor }}
        </el-descriptions-item>
        
        <el-descriptions-item label="辅导员联系电话">
          {{ currentClassDetail.counselorPhone }}
        </el-descriptions-item>
        
        <!-- 上课时间跨两列 -->
        <el-descriptions-item label="上课时间" :span="2">
          <div class="class-schedule">
            <div 
              v-for="(schedule, index) in currentClassDetail.schedule" 
              :key="index"
              class="schedule-item"
            >
              <el-tag type="info" style="margin-right: 8px;">
                {{ schedule.day }}
              </el-tag>
              <span>{{ schedule.time }}</span>
            </div>
          </div>
        </el-descriptions-item>
      </el-descriptions>
      
      <!-- 作业提交情况 -->
      <div class="homework-section">
        <h3 class="section-title">作业提交情况</h3>
        <el-table
          :data="currentClassDetail.homework"
          stripe
          style="width: 100%"
          :empty-text="'暂无作业信息'"
        >
          <el-table-column prop="title" label="作业名称" width="200" align="left" />
          <el-table-column prop="deadline" label="截止时间" width="180" align="left" />
          <el-table-column prop="submittedCount" label="已提交" width="100" align="left">
            <template #default="{ row }">
              <span style="color: #67c23a; font-weight: 500;">
                {{ row.submittedCount }}/{{ currentClassDetail.studentCount }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="submissionRate" label="提交率" width="120" align="left">
            <template #default="{ row }">
              <el-progress 
                :percentage="row.submissionRate" 
                :color="getProgressColor(row.submissionRate)"
                :stroke-width="8"
              />
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="100" align="left">
            <template #default="{ row }">
              <el-tag 
                :type="getHomeworkStatusType(row.status)" 
                size="small"
              >
                {{ row.status }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
      
      <template #footer>
        <el-button type="primary" @click="classDetailDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { getStudentList, type StudentListItem } from '../api/studentInfo'

// 上课时间接口
interface ClassSchedule {
  day: string // 星期几
  time: string // 时间
}

// 作业信息接口
interface HomeworkInfo {
  title: string // 作业名称
  deadline: string // 截止时间
  submittedCount: number // 已提交人数
  submissionRate: number // 提交率（百分比）
  status: string // 状态：进行中、已截止、已完成
}

// 班级信息接口
interface ClassInfo {
  id: number
  major: string // 专业
  classNumber: string // 班号
  college: string // 学院
  studentCount: number // 班级人数
  counselor: string // 辅导员
}

// 班级详情接口
interface ClassDetail {
  id: number
  major: string // 专业
  classNumber: string // 班号
  college: string // 学院
  studentCount: number // 班级人数
  counselor: string // 辅导员
  counselorPhone: string // 辅导员联系电话
  schedule: ClassSchedule[] // 上课时间
  homework: HomeworkInfo[] // 作业提交情况
}

// 学生信息接口
interface StudentInfo {
  id: number
  studentId: string // 学号
  name: string // 姓名
  class: string // 班级
  gender: string // 性别
  contact: string // 联系方式
  classId: number // 所属班级ID
}

// 学生详情接口
interface StudentDetail {
  studentId: string // 学号
  name: string // 姓名
  class: string // 班级
  gender: string | number // 性别（1表示男，0表示女）
  grade: string // 学院
  gpa: number // GPA
  avatar: string // 头像
  idCard: string // 身份证
  contact: string // 联系电话
  address: string // 家庭住址
  emergencyContact: string // 紧急联系人
  emergencyContactPhone: string // 紧急联系人电话
  hobbies: string[] // 爱好
}

// 班级列表数据
const classList = ref<ClassInfo[]>([
  {
    id: 1,
    major: '',
    classNumber: '软件工程1232',
    college: '数学与计算机学院',
    studentCount: 35,
    counselor: '张老师'
  },
  {
    id: 2,
    major: '软件工程',
    classNumber: '软件工程1234',
    college: '数学与计算机学院',
    studentCount: 42,
    counselor: '李老师'
  },
  {
    id: 3,
    major: '数据科学与大数据技术',
    classNumber: '软件工程1231',
    college: '数学与计算机学院',
    studentCount: 38,
    counselor: '王老师'
  }
])

// 保存原始API返回的学生数据（包含完整信息）
const rawStudentDataMap = ref<Map<number, StudentListItem>>(new Map())

// 所有学生数据
const allStudentList = ref<StudentInfo[]>([
  {
    id: 1,
    studentId: '2021001',
    name: '张三',
    class: '计算机科学与技术2021-01班',
    gender: '男',
    contact: '13800138001',
    classId: 1
  },
  {
    id: 2,
    studentId: '2021002',
    name: '李四',
    class: '计算机科学与技术2021-01班',
    gender: '女',
    contact: '13800138002',
    classId: 1
  },
  {
    id: 3,
    studentId: '2021003',
    name: '王五',
    class: '计算机科学与技术2021-01班',
    gender: '男',
    contact: '13800138003',
    classId: 1
  },
  {
    id: 4,
    studentId: '2021004',
    name: '赵六',
    class: '软件工程2021-02班',
    gender: '男',
    contact: '13800138004',
    classId: 2
  },
  {
    id: 5,
    studentId: '2021005',
    name: '钱七',
    class: '软件工程2021-02班',
    gender: '女',
    contact: '13800138005',
    classId: 2
  },
  {
    id: 6,
    studentId: '2022001',
    name: '孙八',
    class: '数据科学与大数据技术2022-01班',
    gender: '男',
    contact: '13900139001',
    classId: 3
  },
  {
    id: 7,
    studentId: '2022002',
    name: '周九',
    class: '数据科学与大数据技术2022-01班',
    gender: '女',
    contact: '13900139002',
    classId: 3
  },
  {
    id: 8,
    studentId: '2023001',
    name: '吴十',
    class: '人工智能2023-01班',
    gender: '男',
    contact: '13700137001',
    classId: 4
  }
])

// 当前选中的班级
const selectedClass = ref<ClassInfo | null>(null)

// 加载状态
const loading = ref(false)

// 查询表单
const searchForm = reactive({
  studentId: '', // 学号查询
  gender: '', // 性别筛选
  class: '' // 班级筛选
})

// 当前显示的学生列表（基于选中的班级）
const currentStudentList = computed(() => {
  if (!selectedClass.value) {
    return []
  }
  return allStudentList.value.filter(student => student.classId === selectedClass.value!.id)
})

// 筛选后的学生列表
const filteredStudentList = computed(() => {
  let list = [...currentStudentList.value]
  
  // 按学号查询
  if (searchForm.studentId) {
    list = list.filter(student => 
      student.studentId.includes(searchForm.studentId)
    )
  }
  
  // 按性别筛选
  if (searchForm.gender) {
    list = list.filter(student => student.gender === searchForm.gender)
  }
  
  // 按班级筛选
  if (searchForm.class) {
    list = list.filter(student => student.class === searchForm.class)
  }
  
  return list
})

// 处理班级卡片点击事件
const handleClassClick = async (classItem: ClassInfo) => {
  selectedClass.value = classItem
  // 重置筛选条件
  handleReset()
  
  // 调用API获取学生列表
  loading.value = true
  try {
    const response = await getStudentList({
      name: '',
      gender: '',
      studentNum: '',
      grade: '',
      className: classItem.classNumber
    })
    
    if (response.code === '200' && response.data) {
      // 将API返回的数据映射到组件使用的格式
      const mappedStudents: StudentInfo[] = response.data.map((item: StudentListItem) => {
        // 处理性别：如果是数字，转换为字符串；如果是字符串，保持原样
        let genderValue: string = ''
        if (item.gender !== undefined && item.gender !== null) {
          if (typeof item.gender === 'number') {
            genderValue = item.gender === 1 ? '男' : '女'
          } else if (typeof item.gender === 'string') {
            genderValue = item.gender === '1' ? '男' : (item.gender === '0' ? '女' : item.gender)
          }
        }
        
        const studentId = typeof item.id === 'number' ? item.id : (typeof item.id === 'string' ? parseInt(item.id) || 0 : 0)
        
        // 保存原始API数据，以便在查看详情时使用
        if (studentId) {
          rawStudentDataMap.value.set(studentId, item)
        }
        
        return {
          id: studentId,
          studentId: item.studentId || item.studentNum || '',
          name: item.name || '',
          class: item.class || item.className || '',
          gender: genderValue,
          contact: item.contact || item.phone || '',
          classId: classItem.id
        }
      })
      
      // 更新学生列表（只保留当前班级的学生）
      allStudentList.value = allStudentList.value.filter(
        student => student.classId !== classItem.id
      )
      allStudentList.value.push(...mappedStudents)
      
      ElMessage.success(`已加载 ${classItem.major}${classItem.classNumber}班的学生信息`)
    } else {
      ElMessage.warning(response.msg || '获取学生列表失败')
      // 清空当前班级的学生列表
      allStudentList.value = allStudentList.value.filter(
        student => student.classId !== classItem.id
      )
    }
  } catch (error) {
    console.error('获取学生列表失败:', error)
    ElMessage.error('获取学生列表失败，请稍后重试')
    // 清空当前班级的学生列表
    allStudentList.value = allStudentList.value.filter(
      student => student.classId !== classItem.id
    )
  } finally {
    loading.value = false
  }
}

// 班级详情对话框显示状态
const classDetailDialogVisible = ref(false)

// 当前查看的班级详情
const currentClassDetail = ref<ClassDetail>({
  id: 0,
  major: '',
  classNumber: '',
  college: '',
  studentCount: 0,
  counselor: '',
  counselorPhone: '',
  schedule: [],
  homework: []
})

// 获取班级详情数据
const getClassDetail = (classItem: ClassInfo): ClassDetail => {
  // 这里可以根据班级ID获取详细信息，暂时使用统一数据
  return {
    id: classItem.id,
    major: classItem.major,
    classNumber: classItem.classNumber,
    college: classItem.college,
    studentCount: classItem.studentCount,
    counselor: classItem.counselor,
    counselorPhone: '13800138000', // 辅导员联系电话
    schedule: [
      { day: '周一', time: '08:00-09:40' },
      { day: '周三', time: '10:00-11:40' },
      { day: '周五', time: '14:00-15:40' }
    ],
    homework: [
      {
        title: '数据结构课程设计',
        deadline: '2024-12-31 23:59',
        submittedCount: 28,
        submissionRate: 80,
        status: '进行中'
      },
      {
        title: '数据库系统原理作业',
        deadline: '2024-12-28 23:59',
        submittedCount: 32,
        submissionRate: 91,
        status: '已完成'
      },
      {
        title: '算法分析与设计实验报告',
        deadline: '2024-12-25 23:59',
        submittedCount: 30,
        submissionRate: 86,
        status: '已截止'
      }
    ]
  }
}

// 查看班级详情
const handleViewClassDetail = (classItem: ClassInfo) => {
  currentClassDetail.value = getClassDetail(classItem)
  classDetailDialogVisible.value = true
}

// 获取进度条颜色
const getProgressColor = (percentage: number) => {
  if (percentage >= 80) return '#67c23a'
  if (percentage >= 60) return '#e6a23c'
  return '#f56c6c'
}

// 获取作业状态标签类型
const getHomeworkStatusType = (status: string) => {
  switch (status) {
    case '进行中':
      return 'warning'
    case '已完成':
      return 'success'
    case '已截止':
      return 'info'
    default:
      return ''
  }
}

// 处理查询
const handleSearch = () => {
  // 筛选逻辑已在 computed 中处理
}

// 重置筛选
const handleReset = () => {
  searchForm.studentId = ''
  searchForm.gender = ''
  searchForm.class = ''
}

// 详情对话框显示状态
const detailDialogVisible = ref(false)

// 当前查看的学生详情
const currentStudentDetail = ref<StudentDetail>({
  studentId: '',
  name: '',
  class: '',
  gender: '',
  grade: '',
  gpa: 0,
  avatar: '',
  idCard: '',
  contact: '',
  address: '',
  emergencyContact: '',
  emergencyContactPhone: '',
  hobbies: []
})

// 将性别数字转换为文字（1表示男，0表示女）
const getGenderDisplay = (gender: string | number): string => {
  if (typeof gender === 'number') {
    return gender === 1 ? '男' : '女'
  }
  if (typeof gender === 'string') {
    if (gender === '1' || gender === '男') return '男'
    if (gender === '0' || gender === '女') return '女'
  }
  return gender as string
}

// 查看详情
const handleViewDetail = (student: StudentInfo) => {
  // 从保存的原始API数据中获取完整信息
  const rawData = rawStudentDataMap.value.get(student.id)
  
  // 构建学生详情，优先使用API返回的数据
  const detail: StudentDetail = {
    studentId: student.studentId,
    name: student.name,
    class: student.class,
    gender: student.gender,
    grade: rawData?.grade || '数学与计算机学院', // 使用API返回的grade，如果没有则使用默认值
    gpa: rawData?.gpa !== undefined && rawData?.gpa !== null ? Number(rawData.gpa) : 0, // 使用API返回的gpa
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    idCard: '320101200001011234',
    contact: student.contact,
    address: '江苏省苏州市吴中区吴中大道1188号',
    emergencyContact: '张先生',
    emergencyContactPhone: '13900139000',
    hobbies: ['编程', '阅读', '运动', '音乐']
  }
  
  currentStudentDetail.value = detail
  detailDialogVisible.value = true
}
</script>

<style scoped>
.student-data-container {
  padding: 0;
}

.content-card {
  height: fit-content;
  min-height: calc(100vh - 200px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
}

.selected-class-name {
  font-size: 14px;
  color: #409eff;
  font-weight: normal;
}

/* 查询和筛选区域 */
.filter-section {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}

/* 学生表格区域 */
.student-table-section {
  margin-top: 20px;
}

/* 表格对齐样式 */
.student-table-section :deep(.el-table) {
  text-align: left;
}

.student-table-section :deep(.el-table th),
.student-table-section :deep(.el-table td) {
  text-align: left !important;
}

.student-table-section :deep(.el-table__cell) {
  text-align: left !important;
}

.student-table-section :deep(.el-table__header-wrapper th) {
  text-align: left !important;
}

.student-table-section :deep(.el-table__body-wrapper td) {
  text-align: left !important;
}

/* 性别标签左对齐 */
.gender-tag {
  display: inline-block;
  text-align: left;
  margin: 0;
}

/* 班级卡片容器 */
.class-card-container {
  height: fit-content;
  max-height: calc(100vh - 160px);
  position: sticky;
  top: 20px;
}

.class-card-container :deep(.el-card__body) {
  padding: 20px;
}

/* 班级卡片列表 */
.class-cards-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: calc(100vh - 280px);
  overflow-y: auto;
}

.class-cards-list::-webkit-scrollbar {
  width: 6px;
}

.class-cards-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.class-cards-list::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.class-cards-list::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 单个班级卡片 */
.class-card {
  background: #ffffff;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.class-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-color: #c0c4cc;
}

.class-card.is-selected {
  border-color: #409eff;
  background-color: #ecf5ff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
}

/* 班级卡片头部 */
.class-card-header {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.class-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  line-height: 1.4;
}

/* 班级卡片主体 */
.class-card-body {
  margin-bottom: 12px;
}

.class-info-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.6;
}

/* 班级卡片底部 */
.class-card-footer {
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: center;
}

.class-info-item:last-child {
  margin-bottom: 0;
}

.info-label {
  color: #606266;
  min-width: 70px;
  margin-right: 8px;
}

.info-value {
  color: #303133;
  flex: 1;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .student-data-container .el-col {
    margin-bottom: 20px;
  }
  
  .class-card-container {
    position: relative;
    top: 0;
  }
  
  .class-cards-list {
    max-height: none;
  }
}

/* 空状态样式 */
:deep(.el-empty) {
  padding: 40px 0;
}

/* 详情对话框样式 */
:deep(.el-dialog__body) {
  padding: 20px;
}

:deep(.el-descriptions__label) {
  font-weight: 600;
  color: #606266;
}

:deep(.el-descriptions__content) {
  color: #303133;
}

/* 头像区域样式 */
:deep(.el-descriptions__body .el-descriptions__table) {
  width: 100%;
}

:deep(.el-descriptions__body .el-descriptions__table td) {
  padding: 16px;
}

/* 爱好标签样式 */
:deep(.el-tag) {
  margin-right: 8px;
  margin-bottom: 4px;
}

/* 班级详情对话框样式 */
.class-schedule {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.schedule-item {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.homework-section {
  margin-top: 24px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #409eff;
}

/* 班级详情对话框的表格样式 */
.homework-section :deep(.el-table) {
  text-align: left;
}

.homework-section :deep(.el-table th),
.homework-section :deep(.el-table td) {
  text-align: left !important;
}
</style>
